<!--产品详细-->
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="../css/productDetail.css" />
</head>

<body class="gray">
	<div class="mui-content productDetail loading" id="vueMain" style="padding-bottom: 90px;">
	    <ul class="mui-table-view" style="margin-top: 0px;">
	        <li class="mui-table-view-cell tls">
	        		<span class="status" v-if="list.status==0">上架中</span>
	        		<span class="status" v-if="list.status==1">已下架</span>
	        		{{list.goods_no}}
	        </li>
	        <li class="mui-table-view-cell mui-media">
	        		<a href="javascript:;">
    		            <img class="mui-media-object mui-pull-left" :src="list.img" />
    		            <div class="mui-media-body">
    		                <div class="name">{{list.name}}</div>
    		                <p>上货日期：{{list.add_time}}</p>
    		            </div>
    		             <p class="total">总金额: <span >¥ {{list.price}}</span> </p>
    		        </a>
    		        <div class="mui-row">
    		        		<template v-for="item in list.photo">
    		        		<div class="mui-col-xs-4 mui-col-sm-4"><img :src="item" class="maximg" data-preview-src="" data-preview-group="1" alt="" /></div>
    		        		</template>
    		        </div>
	        </li>
    		</ul>
    		
    		<ul class="mui-table-view normalAc">
	        <li class="mui-table-view-cell">
	            <a class="mui-navigate-right">
	            		<div class="mui-pull-right">{{list.commend_name}}</div>
	               	所属类型
	            </a>
	        </li>
	        <li class="mui-table-view-cell">
	            <a class="mui-navigate-right">
	                 <div class="mui-pull-right">{{list.category_name}}</div>
	               	所属分类
	            </a>
	        </li>
	        <li class="mui-table-view-cell">
	            <a class="mui-navigate-right">
	                 <div class="mui-pull-right" >{{list.city_name}}</div>
	               	服务城市
	            </a>
	        </li>
	    </ul>
	    <ul class="mui-table-view attslist" v-if="list.attr.length!=0">
	    		<li class="mui-table-view-cell basic" v-if="list.attr_d.length > 0">
	    			<div class="ts">基本信息</div>
	    			<template v-for="item in list.attr_d">
	    				<p class="mui-clearfix"><span class="mui-pull-right">{{item.attr_value[0]}}</span>{{item.attr_name}}</p>
	    			</template>
	    		</li>
	    		<template v-for="item in list.attr_e">
	    			<li class="mui-table-view-cell basic">
	    				<div class="ts">{{item.attr_name}}</div>
	    				<div class="labels">
	    				<template v-for="ita in item.attr_value">
	    					<span>{{ita}}</span>
	    				</template>
	    				</div>
	    			</li>
	    		</template>
	    		
	    </ul>
        
        <div class="item" >
        		<div class="mui-content-padded">
        			<div class="title">详细介绍</div>
        			<div class="content" v-html="list.content"></div>
        		</div>
        </div>
        
        <div style=" position: fixed;bottom: 0;left: 5%;width: 90%; ">
	    		<button type="button" class="mui-btn mui-btn-block bexta-btn bexta-btn-red handle"  v-if="list.status==0">下架</button>
	    		<button type="button" class="mui-btn mui-btn-block bexta-btn bexta-btn-yewllo handle"  v-if="list.status==1">上架</button>
	    </div>
	    
    		
    		
    		
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, merchant;
	mui.init();
	mui.plusReady(function () {
	   views = bexta.getWebview();
	   merchant = bexta.getStorage(MERCHANT);
	   bexta.ajax(api.goods_detail, function(res){
	   		initVue(res);
	   },{data:{uid:merchant.uid, goods_id:views.gid}});
	});
	function initVue(res){
		var a = [], b = [];
		for(var index = 0, len = res.attr.length; index < len; index++ ){
			if( res.attr[index].attr_value.length ==1 ){
				a.push(res.attr[index]);
			}else{
				b.push(res.attr[index]);
			}
		}
		res['attr_d'] = a;
		res['attr_e'] = b;
		
		apps = new Vue({
			el:"#vueMain",
			data:{
				list:res
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				mui.each(document.querySelectorAll('.content img'), function(){
					this.setAttribute('data-preview-src', "");
					this.setAttribute('data-preview-group', "2");
				});
				mui.previewImage();
				
				mui('#vueMain').on('tap', '.handle', function(){
					bexta.ajax(api.update_goods_status, function(res, msg){
						mui.toast(msg);
						if( !res ){
							views.reload()
						}
					}, {data:{uid:merchant.uid, goods_id:apps.list.id}});
				});
			}
		});
	}
	
</script>
</body>
</html>